우측 패널 (Style)

생성일: 2026년 9월 9일 오전 10:54

우측 패널 구조 이해하기

우측 속성 패널은 선택한 요소의 스타일과 동작을 설정하는 영역입니다.
선택한 컴포넌트 종류에 따라 설정 가능한 항목이 변경됩니다.

우측 패널 구성

탭	설명
Style	디자인 및 레이아웃 설정
Animation	인터랙션 및 모션 설정
Data	데이터 연결 설정

1. Style 탭 이해하기

Style 탭에서는 요소의 위치, 크기, 색상, 텍스트 스타일 등을 설정할 수 있습니다.

Position

Position은 선택한 요소의 위치와 정렬 방식을 설정하는 영역입니다.
캔버스 내에서 요소가 어디에 배치될지 결정할 수 있습니다.

항목	설명
Align	정렬 위치 설정
X / Y	좌표 위치 설정
Position Type	Relative / Absolute 설정
Z-Index	레이어 우선순위 설정

① Align

요소의 정렬 방향을 설정합니다.

② X / Y 좌표

요소의 정확한 위치를 숫자로 설정할 수 있습니다.

값	설명
X	가로 위치
Y	세로 위치

③ Position Type

요소의 배치 기준을 설정합니다.

Relative

부모 레이아웃 흐름을 따라 배치됩니다.

Absolute

부모 영역 기준으로 자유롭게 위치를 배치할 수 있습니다.

활용 예시

• 뱃지
• 플로팅 버튼
• 오버레이 UI

④ Z-Index

요소의 쌓이는 순서를 설정합니다. 숫자가 높을수록 더 위에 표시됩니다.

💡 실무 TIP

---

Layout

Layout은 요소 내부의 정렬과 배치 방식을 설정하는 영역입니다.
컴포넌트와 콘텐츠를 일정한 규칙으로 정렬할 수 있습니다.

타입	설명
Flex	한 방향 기준 정렬
Grid	격자 형태 정렬

① Flex Layout

가장 많이 사용하는 레이아웃 방식입니다.
요소를 가로 또는 세로 방향으로 정렬할 수 있습니다.

②Grid Layout

요소를 격자 형태로 정렬하는 방식입니다.
상품 리스트나 카드 UI에서 자주 사용됩니다.

③ Padding

내부 여백을 설정합니다.

Padding 예시

값	결과
10	전체 동일 여백
18,16,12,10	방향별 개별 여백

---

Size

Size는 선택한 요소의 너비와 높이를 설정하는 영역입니다.
요소 크기를 고정하거나 부모 영역 기준으로 자동 조절할 수 있습니다.

항목	설명
Width	가로 크기
Height	세로 크기
Size Mode	크기 동작 방식 설정

① Fix

고정된 크기를 사용하는 방식입니다.

활용 예시

• 버튼
• 아이콘
• 배너

② Fill

부모 영역 크기에 맞춰 자동으로 늘어납니다.

활용 예시

• 전체 너비 섹션
• 반응형 카드

③ Hug

내부 콘텐츠 크기에 맞춰 자동 조절됩니다.

활용 예시

• 태그
• 배지
• 버튼

④ Rel (Relative)

부모 영역 기준 비율로 크기가 설정됩니다.

활용 예시

• 반응형 레이아웃
• 비율 기반 UI

---

Text

Text는 텍스트 스타일과 타이포그래피를 설정하는 영역입니다.
폰트, 크기, 정렬, 색상 등을 자유롭게 수정할 수 있습니다.

항목	설명
Font Family	폰트 설정
Weight	글자 두께
Size	글자 크기
Line Height	줄 간격
Letter Spacing	자간
Align	정렬
Decoration	폰트 장식
Color	텍스트 색상

① Font Family

텍스트에 적용할 폰트를 선택할 수 있습니다.

② Weight

글자 두께를 설정합니다.

③ Font Size

텍스트 크기를 설정합니다.

④ Line Height

텍스트 줄 간격을 설정합니다.

⑤ Letter Spacing

글자 사이 간격을 설정합니다.

⑥ Text Style

자주 사용하는 텍스트 스타일을 저장할 수 있습니다.

• 디자인 일관성 유지
• 전체 스타일 한번에 수정 가능
• 반복 작업 감소

⑦ Text Detail

추가 텍스트 옵션을 설정할 수 있습니다.

⑧ Text Decoration

텍스트 장식을 설정합니다.

⑨ Content

텍스트 내용을 직접 입력할 수 있습니다.

---

Styles

Styles는 요소의 시각적인 스타일을 설정하는 영역입니다.
색상, 투명도, Radius, Overflow 등 디자인 속성을 관리할 수 있습니다.

① Fill

요소의 배경 색상을 설정합니다.

② Opacity

요소의 투명도를 설정합니다.

③ Radius

모서리 둥글기를 설정합니다.

④ Overflow

영역을 벗어나는 콘텐츠 처리 방식을 설정합니다.

옵션	설명
Visible	그대로 표시
Clip	영역 기준 잘라내기
Scroll	스크롤 생성

⑤ Blending

요소의 색상 혼합 방식을 설정합니다.

⑥ Visible

요소의 표시 여부를 설정합니다.

---

Stroke

Stroke는 요소의 테두리 스타일을 설정하는 영역입니다.
테두리 색상, 두께, 스타일, Radius 등을 조절할 수 있습니다.

① Stroke Color

테두리 색상을 설정합니다.

② Opacity

테두리 투명도를 설정합니다.

③ Stroke Style

테두리 스타일을 설정합니다.

④ Stroke

테투리 굵기를 적용할 수 있습니다.

⑤ Radius

테두리 모서리 둥글기를 설정합니다.

---

Effects

Effects는 요소에 시각 효과를 추가하는 영역입니다.
그림자, Blur 효과 등을 설정하여 UI에 깊이감과 강조 효과를 줄 수 있습니다.

① Shadow

요소에 그림자를 추가할 수 있습니다.

• 색상
• 투명도
• X / Y 위치
• Blur 값

② Blur

선택한 요소 자체를 흐리게 처리합니다.

③ BG Blur

요소 뒤쪽 배경을 흐리게 처리합니다.

---

Filters

Filters는 이미지나 요소의 색감과 표현 방식을 조정하는 기능입니다.
밝기, 대비, 채도, Blur, Mask 등을 설정하여 다양한 분위기를 연출할 수 있습니다.

항목	설명
Brightness	밝기 조절
Contrast	대비 조절
Grayscale	흑백 처리
Hue	색상 변경
Invert	색상 반전
Saturate	채도 조절
Sepia	세피아 효과
Mask	마스크 효과 적용

---

Link

Link는 요소를 페이지 또는 외부 URL과 연결하는 기능입니다.
버튼, 텍스트, 이미지 등에 링크를 설정할 수 있습니다.

항목	설명
Type	링크 타입 선택
Link To	이동할 페이지 또는 URL 입력
New Tab	새 탭 열기 여부
Rel	링크 속성 설정
Parameters	URL 파라미터 유지 여부
Tracking	트래킹 ID 설정

---

HTML Attributes

HTML Attributes는 요소에 고유 ID를 지정하는 기능입니다.
주로 스타일 제어, 스크립트 연결, 특정 영역 식별 등에 사용됩니다.

---

Event

Event는 요소에 특정 동작(Action)을 연결하는 기능입니다.
버튼 클릭, 페이지 이동, 팝업 실행 등 다양한 인터랙션을 설정할 수 있습니다.

항목	설명
Type	이벤트 타입 선택
Event	실행할 이벤트 선택
Trigger	이벤트 실행 조건 설정

---

Transforms

Transforms는 요소의 크기, 회전, 기울기, 원근감 등을 조정하는 기능입니다.
주로 인터랙션, 애니메이션, 3D 효과 구현에 사용됩니다.

항목	설명
Scale	요소 크기 확대/축소
Rotate	요소 회전
Skew	요소 기울기
Depth	Z축 깊이 설정
Perspective	원근감 설정
Origin	변형 기준점 설정
Backface	뒷면 표시 여부
Preserve	3D 상태 유지 여부

---

Accessibility

Accessibility는 웹 접근성과 검색엔진 대응을 위한 설정입니다.
요소의 HTML 태그, 접근성 정보, 포커스 이동 순서 등을 설정할 수 있습니다.

항목	설명
Tag	HTML 태그 설정
Area Label	접근성 라벨 설정
Tab Index	탭 이동 순서 설정
Google Bot	검색엔진 노출 여부 설정